<template>
  <roll-in-layout :current="5">
    <mt-button slot="right" @click="back">上一步</mt-button>
    <div class="roll-in-5">
      <div class="item">
        <div class="common-title">
          <div class="left">曾任党内职务或曾受何种奖励及处分</div>
        </div>
        <div class="content">
          <yd-textarea slot="right" placeholder="请输入详细内容" maxlength="150" v-model.trim="form.bonuspenalty"></yd-textarea>
        </div>
      </div>
      <div class="item">
        <div class="common-title">
          <div class="left">备注</div>
        </div>
        <div class="content">
          <yd-textarea slot="right" placeholder="请输入详细内容" maxlength="150" v-model.trim="form.bak"></yd-textarea>
        </div>
      </div>
      <div class="item" style="padding: 0 0 .3rem 0;">
        <div class="common-title">
          <div class="left">获得奖项</div>
          <span class="edit" @click="handleAdd">
            <span>{{addForm ? '收起' : '添加'}}</span>&nbsp;
            <i class="xffont" :class="addForm ? 'xf-reduce_circle' : 'xf-more'"></i>
          </span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="award-list" v-if="!addForm" key="list">
            <loading-text v-if="loading"></loading-text>
            <apply-empty v-if="!loading && !list.length"></apply-empty>
            <div class="award-item" v-for="(val, key) in list" :key="key">
              <transition name="fade" mode="out-in">
                <div class="award-content" v-if="!toggle[key]" key="content">
                  <div class="award-left">
                    <span>{{val.rewardDate}}</span>
                    <span>{{val.rewardName}}</span>
                  </div>
                  <div class="edit" @click="handleEdit(key, val.id)">
                    <i class="xffont xf-more1"></i>
                  </div>
                </div>
                <roll-in-award-form v-if="toggle[key]" @cancel="toggleShow(key)" @save="handleSave" key="form" :detail="list[key]"></roll-in-award-form>
              </transition>
            </div>
          </div>
          <roll-in-award-form v-if="addForm" @cancel="handleAdd" @save="handleSave" key="form"></roll-in-award-form>
        </transition>
        <mt-actionsheet
          :actions="actions"
          v-model="sheetVisible">
        </mt-actionsheet>
      </div>
    </div>
    <div class="next" slot="footer">
      <mt-button size="large" type="primary" @click="onSubmit">提交审批</mt-button>
    </div>
  </roll-in-layout>
</template>
<script>
  import RollInLayout from './layout.vue'
  import RollInAwardForm from './roll-in-award-form.vue'
  import LoadingText from '../../../components/loading-text/loading-text'
  import ApplyEmpty from '../../record/apply/apply-empty'

  export default {
    components: {
      ApplyEmpty,
      LoadingText,
      RollInAwardForm,
      RollInLayout},
    data() {
      return {
        form: {
          personId: this.$route.query.id,
          bonuspenalty: '', // 奖惩
          bak: '' // 备注
        },
        addForm: false,
        toggle: [],
        codeEdit: [],
        sheetVisible: false,
        delCode: '',
        delNum: '',
        actions: [{
          name: '编辑',
          method: () => {
            this.toggleShow(this.delNum, this.delCode)
          }
        }, {
          name: '删除',
          method: () => {
            this.$message.confirm('确定删除？').then(() => {
              this.del()
            })
          }
        }],
        canLeave: false,
        loading: true,
        list: []
      }
    },
    methods: {
      // 奖励及处分
      getInfo() {
        this.$post('/admin/person/sapi/party/organization/bonuspenalty/get/info', {
          personId: this.$route.query.id
        }).then(res => {})
      },
      // 奖项列表
      getList() {
        this.$post('/admin/person/sapi/party/reward/punishment/get/list', {
          personId: this.$route.query.id,
          type: 1
        }, loading => { this.loading = loading }, false).then(res => {
          this.list = res.data.personRewardpunishment
        }).catch(() => {
          this.list = []
        })
      },
      back() {
        this.canLeave = true
        this.$router.replace({
          name: 'rollIn4',
          query: this.$route.query
        })
      },
      toggleShow(num, code) {
        this.setCode(num, code)
        this.toggle[num] = !this.toggle[num]
        this.toggle = Array.prototype.slice.call(this.toggle)
      },
      setCode(num, code) {
        this.codeEdit[num] = code || ''
        this.codeEdit = Array.prototype.slice.call(this.codeEdit)
      },
      handleEdit(num, delCode) {
        this.delCode = delCode
        this.delNum = num
        this.sheetVisible = true
      },
      handleAdd() {
        this.addForm = !this.addForm
      },
      del() {
        this.$post('/admin/person/sapi/personal/records/perEntry/delete/reward/punishment', {
          personId: this.$route.query.id,
          id: this.delCode
        }, loading => { this.$message.loading(loading) }).then(res => {
          this.$message.toast(res.message)
          this.getList()
        })
      },
      onSubmit() {
        this.$message.confirm('确定提交审核？').then(() => {
          this.$post('/admin/person/sapi/party/organization/saveBak', this.form, loading => { this.$message.loading(loading) }).then(res => {
            this.canLeave = true
            this.$router.replace({name: 'rollInSuccess'})
          })
        })
      },
      handleSave() {
        this.addForm = false
        this.toggle = []
        this.getList()
      }
    },
    created() {
      // this.getInfo()
      this.getList()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
  .common-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .3rem;
    border-bottom: 1px solid #d9d9d9;
    .left{
      display: inline-block;
      padding: 0 0 0 .3rem;
      border-left: 6px solid $primary;
      font-weight: bold;
    }
  }
  .item{
    margin: .2rem 0 0 0;
    background: #fff;
    .edit{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content{
      padding: .2rem;
    }
  }
  .award-list{
    .award-item{
      border-bottom: 1px solid #ededed;
    }
    .award-content{
      margin: .15rem 0 0 0;
      padding: .2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .award-left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        span{
          &:first-child{
            font-size: .28rem;
          }
          &:not(:first-child){
            font-size: .3rem;
            color: #666;
            margin: .1rem 0 0 0;
          }
        }
      }
      .edit{
        padding: .2rem;
        .xffont{
          font-size: .5rem;
        }
      }
    }
  }
</style>
